<!DOCTYPE html>
<!-- saved from url=(0049)http://www.dmaku.com/demo/moban/2019091554100565/ -->
<html xmlns="http://www.w3.org/1999/xhtml" class="root61">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="./css/common.css" rel="stylesheet" type="text/css">
		<link href="./css/iconfont.css" rel="stylesheet" type="text/css">
		<link href="./css/style.css" rel="stylesheet" type="text/css">
		<link href="./css/shopdetail.css" rel="stylesheet" type="text/css">

		<script src="./js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<!--<script src="./js/common.js"></script>-->
		<!--<script src="./js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>-->
		<script src="./js/common_js.js" type="text/javascript"></script>
		<script src="./js/footer.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<title>Dome1</title>
	</head>
	<!-- 根组件 -->
	<script type="text/x-template" id="top">
		<div>
			<!--顶部广告-->
			<div class="p_f_name infonav_hidden">
			</div>
			<!--悬浮广告-->
			<div class="mod_qr">
				<a href="javascript:void(0);" @click="shangpinxq(shangpingData.id)" class="mod_qr_bd" style="overflow: hidden;"><img v-for="time in shangpingData.srcArr" v-if="time.id == 1" :src="time.src" width="100%" height="100%"></a>
				<a href="javascript:void(0);" id="close" class="fixed_qr_close"><em class="iconfont icon-close2"></em></a>
			</div>
			<!--左侧悬浮菜单样式-->
			<div class="Suspension" id="left_nav" style="top: 211.5px; display: none;">
				<div class="Suspension_top"></div>
				<div class="Suspension_menu">
					<ul>
						<li v-for="time in Suspension_menu_listL">
							<a href="javascript:void(0);" @click="fenleiss(time.id)" class="">{{time.name}}</a>
						</li>
					</ul>
				</div>
				<div class=""></div>
			</div>
			<!--顶部图层-->
			<div id="header_top">
				<div id="top">
					<div class="Inside_pages">
						<div class="Collection">您好，欢迎光临！<em></em>
							<a href="javascript:void(0);">收藏我们</a>
						</div>
						<div class="hd_top_manu clearfix">
							<ul class="clearfix">
								<li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover">欢迎光临本店！</li>
								<li class="hd_menu_tit" data-addclass="hd_menu_hover">
									<a href="javascript:void(0);" onclick="alert('亲，客服忙')">联系我们</a>
								</li>
								<li class="hd_menu_tit list_name" data-addclass="hd_menu_hover">
									<a href="javascript:void(0);" onclick="alert('敬请期待')" class="hd_menu">客户服务</a>
									<div class="hd_menu_list">
										<ul>
											<li v-for="time in hd_menu_list">
												<a href="javascript:void(0);" onclick="alert('暂未上线')">{{time.name}}</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--样式-->
				<!--顶部样式2-->
				<div id="header " class="header page_style">
					<div class="logo">
						<a href="javascript:void(0);" @click="shangpinxq(shangpingData.id)"><img v-for="time in shangpingData.srcArr" v-if="time.id == 1" :src="time.src" width="218" height="122"></a>
					</div>
					<!--结束图层-->
					<div class="Search">
						<p><input name="" type="text" class="text"><input name="" type="submit" value="搜 索" class="Search_btn"></p>
						<p class="Words">
							<a v-for="time in Words_list" href="javascript:void(0);" @click="fenleiss(time.id)">{{time.name}}</a>
						</p>
					</div>
					<!--购物车样式-->
					<div class="hd_Shopping_list" id="Shopping_list">
						<div class="s_cart"><em class="iconfont icon-cart2"></em>
							<a href="javascript:void(0);">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count" id="shopping-amount">0</i></div>
						<div class="dorpdown-layer">
							<div class="spacer"></div>
							<!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>-->
							<ul class="p_s_list">
								<li>
									<div class="img"><img src="img/top/01.jpg"></div>
									<div class="content">
										<p>
											<a href="javascript:void(0);">产品名称</a>
										</p>
										<p>颜色分类:紫花8255尺码:XL</p>
									</div>
									<div class="Operations">
										<p class="Price">￥55.00</p>
										<p>
											<a href="javascript:void(0);" @click="deleteshangpin()">删除</a>
										</p>
									</div>
								</li>
							</ul>
							<div class="Shopping_style">
								<div class="p-total">共<b>1</b>件商品　共计<strong>￥ 515.00</strong></div>
								<a href="javascript:void(0);" @click="Settlement()" title="结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
							</div>
						</div>
					</div>
				</div>
				<!--菜单导航样式-->
				<div id="Menu" class="clearfix">
					<div class="index_style clearfix">
						<div id="allSortOuterbox">
							<div class="t_menu_img"></div>
							<div class="Category">
								<a href="javascript:void(0);"><em></em>所有产品分类</a>
							</div>
							<div class="hd_allsort_out_box_new" v-show="$parent.flag != 'xiangqing'">
								<!--左侧栏目开始-->
								<ul class="Menu_list">
									<!--<li ng-repeat="time in Menu_listData" on-finish-render-filters class="name on">-->
									<li v-for="o in 7" key="o.index" class="name">
										<div class="Menu_name">
											<a href="javascript:void(0);">{{Menu_listData.name}}</a> <span>&lt;</span></div>
										<div class="link_name">
											<p>
												<a v-for="time1 in Menu_listData.types" key="time1.id" href="javascript:void(0);">{{time1.name}}</a>
											</p>
										</div>
										<div class="menv_Detail">
											<div class="cat_pannel clearfix">
												<div class="hd_sort_list">
													<dl v-for="time2 in Menu_listData.contents" key="time2.id" class="clearfix" :data-tpc="time2.id">
														<dt><a href="javascript:void(0);">{{time2.name}}<i>&gt;</i></a></dt>
														<dd>
															<a href="javascript:void(0);" v-for="time3 in time2.types" key="time3.id">{{time3.name}}</a>
														</dd>
													</dl>
												</div>
												<div class="Brands">
													<a v-for="time4 in Menu_listData.imglist" key="time4.id" href="javascript:void(0);" class="logo_Brands"><img :src="time4.src"></a>
												</div>
											</div>
											<!--品牌-->
										</div>
									</li>
								</ul>
							</div>
						</div>
						<!--菜单栏-->
						<div class="Navigation" id="Navigation">
							<ul class="Navigation_name">
								<li v-for="time in Navigation_name_list" class="on">
									<a href="javascript:void(0);" @click="fenleiss(time.id)">{{time.name}}</a>
								</li>
							</ul>
						</div>
						<a href="javascript:void(0);" class="link_bg"><img src="./img/link_bg_03.png"></a>
					</div>
				</div>
			</div>
		</div>
	</script>
	<script type="text/x-template" id="index">
		<div class="">
			<!--幻灯片部分-->
			<sh-index1></sh-index1>
			<!---->
			<div class="index_style clearfix">
				<!--广告限时特价-->
				<sh-index2></sh-index2>
				<!--限时特卖-->
				<sh-index3></sh-index3>
				<!--品牌展示-->
				<sh-index4></sh-index4>
				<!--产品版块-->
				<sh-index5></sh-index5>
				<!--猜你喜欢样式-->
				<div class="like_p">
					<div class="title_name"><span>猜你喜欢</span></div>
					<!---->
					<sh-liebiao></sh-liebiao>
				</div>
			</div>
		</div>
	</script>
	<!-- 公用组件 -->
	<script type="text/x-template" id="index1">
		<div id="slideBox" class="slideBox"><!--幻灯片部分-->
			<div class="hd">
				<ul class="smallUl">
					<li class="on"></li>
					<li v-for="time in 4" key="time.index" class="">{{time}}</li>
				</ul>
			</div>
			<div class="bd">
				<ul>
					<li style="display: list-item;">
						<a href="javascript:void(0);" target="_blank">
							<div style="background:url(img/top/01.jpg) no-repeat rgb(207, 231, 255); background-position:center ; width:100%; height:460px;"></div>
						</a>
					</li>
					<li v-for="time in 4" key="time.index" style="display: none;">
						<a href="javascript:void(0);" target="_blank">
							<div style="background:url(img/top/01.jpg) no-repeat; background-position:center; width:100%; height:460px;"></div>
						</a>
					</li>
				</ul>
			</div>
			<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
			<a class="prev" href="javascript:void(0)"></a>
			<a class="next" href="javascript:void(0)"></a>
		</div>
	</script>
	<script type="text/x-template" id="index2">
		<div class="p_Deals"><!--广告限时特价-->
			<div class="Deals_title" style="overflow: hidden;">
				<div class="title_name">
					<h1>限时特价</h1>
					<h2>-大牌火热热卖中-</h2>
				</div>
				<img src="img/top/01.jpg" width="100%" height="100%">
			</div>
			<div class="Deals_list">
				<ul class="products">
					<li v-for="time in 4" key="time.index">
						<a href="javascript:void(0);"><img src="img/top/01.jpg"><img src="img/top/01.jpg" class="title"></a>
					</li>
				</ul>
			</div>
		</div>
	</script>
	<script type="text/x-template" id="index3">
		<div class="p_Section clearfix"><!--产品版块-->
			<div class="Section_title">
				<div class="name"><em>1F</em>脸部护理</div>
				<div class="p_link">
					<a href="javascript:void(0);">面膜</a> |
					<a href="javascript:void(0);">补水</a> |
					<a href="javascript:void(0);">祛痘</a> |
					<a href="javascript:void(0);">美白</a> |
					<a href="javascript:void(0);">防晒</a> |
					<a href="javascript:void(0);">护肤套装</a> |
					<a href="javascript:void(0);">洁面</a>
				</div>
			</div>
			<div class="Section_info clearfix">
				<div class="pro_ad_slide">
					<div class="hd">
						<ul>
							<li class="">1</li>
							<li class="on">2</li>
						</ul>
					</div>
					<div class="bd">
						<ul>
							<li style="display: none;">
								<a href="javascript:void(0);"><img src="img/top/01.jpg" width="598" height="449"></a>
							</li>
							<li style="display: list-item;">
								<a href="javascript:void(0);"><img src="img/top/01.jpg" width="598" height="449"></a>
							</li>
						</ul>
					</div>
					<a class="prev" href="javascript:void(0)"><em class="arrow"></em></a>
					<a class="next" href="javascript:void(0)"><em class="arrow"></em></a>
				</div>
				<!--产品列表-->
				<div class="pro_list">
					<ul>
						<li v-for="time in 6" key="time.index">
							<a href="javascript:void(0);"><img src="img/top/01.jpg" width="180px" height="150px"></a>
							<a href="javascript:void(0);" class="p_title_name">Olay玉兰油 新生塑颜金纯活能水</a>
							<div class="Numeral"><span class="price"><i>￥</i>123.00</span><span class="Sales">销量<i>345</i>件</span></div>
						</li>
					</ul>
				</div>
				<div class="pro_ads">
					<ul>
						<li v-for="o in 6" key="o.index" class="border">
							<a href="javascript:void(0);"><img src="img/top/01.jpg" width="198" height="140px"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</script>
	<script type="text/x-template" id="index4">
		<div class="Limit_p"><!--限时特卖-->
			<div class="Limit_title" style="overflow: hidden;"><img src="img/top/01.jpg" width="100%" height="100%">
				<div class="title_name">
					<h1>限时团购</h1>
					<h2>LIMIT BUY</h2>
					<h3>品牌限时优惠促销</h3></div>
			</div>
			<div class="Limit_list">
				<ul class="p_t_list">
					<li v-for="time in 6" key="time.index">
						<a href="javascript:void(0);"><span>御泥坊 玫瑰滋养+红石榴亮颜美肤套装 </span><img src="img/top/01.jpg" width="180" height="170">
							<div class="time"><em class="iconfont icon-time"></em>剩余时间：05时03分45秒</div>
						</a>
					</li>
					<li class="Limit_name">
						<a href="javascript:void(0);"><img src="img/top/01.jpg" width="243" height="399">
							<div class="time"><em class="iconfont icon-time"></em>剩余时间：05时03分45秒</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</script>
	<script type="text/x-template" id="index5">
		<div class="Brand_Show" id="Brand_Show"><!--品牌展示-->
			<div class="parHd  Toggle">
				<ul>
					<li class="on">国际大牌<em></em></li>
					<li>推荐品牌<em></em></li>
					<li>国货精品<em></em></li>
				</ul>
			</div>
			<div class="parBd list">
				<div class="parBdIn">
					<ul>
						<li class="brand_list">
							<a v-for="time in 10" key="time.index" href="javascript:void(0);" class="brand_logo">
								<img src="img/top/01.jpg" width="160" height="80">
								<span>欧珀莱</span>
							</a>
						</li>
						<li class="brand_ad">
							<div class="AD_slideBox" id="AD_slideBox">
								<div class="hd">
									<ul>
										<li class="">1</li>
										<li class="">2</li>
										<li class="on">3</li>
									</ul>
								</div>
								<div class="bd">
									<ul>
										<li style="display: none;">
											<a href="javascript:void(0);"><img src="img/top/01.jpg" width="199" height="280"></a>
										</li>                                         
										<li style="display: none;">                   
											<a href="javascript:void(0);"><img src="img/top/01.jpg" width="199" height="280"></a>
										</li>                                           
										<li style="display: list-item;">                
											<a href="javascript:void(0);"><img src="img/top/01.jpg" width="199" height="280"></a>
										</li>
									</ul>
								</div>
							</div>
						</li>
					</ul>
					<ul style="display: none;">
						<li class="brand_list">
							<a v-for="o in 10" key="o.index" href="javascript:void(0);" class="brand_logo"><img src="img/top/01.jpg" width="160"><span>欧珀莱</span></a>
						</li>
					</ul>
					<ul style="display: none;">
						<li class="brand_list">
							<a v-for="o in 10" key="o.index" href="javascript:void(0);" class="brand_logo"><img src="img/top/01.jpg" width="160"><span>欧珀莱</span></a>
						</li>
					</ul>
				</div>
			</div>
			<a class="prev" href="javascript:void(0)"><em class="iconfont icon-left"></em></a>
			<a class="next" href="javascript:void(0)"><em class="iconfont icon-right"></em></a>
		</div>
	</script>
	<script type="text/x-template" id="liebiao">
		<div class="like_p index_style">
			<div class="list">
				<ul class="list_style">
					<li v-for="o in 8" key="o.index" class="p_info_u">
						<a href="javascript:void(0);" class="p_img" style="overflow: hidden;"><img src="img/top/01.jpg" width="100%" height="100%"></a>
						<a href="javascript:void(0);" class="name">御泥坊 玫瑰滋养+红石榴亮颜美肤套装 深层补水滋润 提亮肤色</a>
						<div class="Numeral"><span class="price"><i>￥</i>123.00</span><span class="Sales">销量<i>345</i>件</span></div>
					</li>
				</ul>
			</div>
		</div>
	</script>
	<!-- 根组件 -->
	<script type="text/x-template" id="bottom">
		<div class="">
			<div class="slogen">
				<div class="index_style">
					<ul class="wrap">
						<li v-for="time in index_styleData" key="time.id">
							<a href="javascript:void(0);" style="overflow: hidden;"><img :src="time.src" data-bd-imgshare-binded="1" width="100%" height="100%"></a>
							<b>{{time.name}}</b>
							<span>{{time.title}}</span>
						</li>
					</ul>
				</div>
			</div>
			<!--底部图层-->
			<div class="phone_style">
				<div class="index_style">
					<span class="phone_number"><em class="iconfont icon-dianhua"></em>400-8820-345</span><span class="phone_title">客服热线 7X24小时 贴心服务</span>
				</div>
			</div>
			<div class="footerbox clearfix">
				<div class="clearfix">
					<div class="">
						<dl v-for="time in clearfixData" key="time.id">
							<dt>{{time.name}}</dt>
							<dd v-for="time2 in time.data" key="time2.id">
								<a href="javascript:void(0);">{{time2.name}}</a>
							</dd>
						</dl>
					</div>
				</div>
				<div class="text_link">
					<p>
						<a href="javascript:void(0);" v-for="time in text_linkData" key="time.id">{{time.name}}</a>｜
					</p>
					<p>津ICP备19017033号 Copyright ©2019 天津鞋业有限公司 All Rights Reserved. Technical support:CDDGG Group
					</p>
				</div>
			</div>
			<!--右侧菜单栏购物车样式-->
			<div class="fixedBox">
				<ul class="fixedBoxList">
					<li v-for="time in dataWQ" key="time.id" class="fixeBoxLi code cart_bd " style="display:block;" id="cartboxs">
						<span class="fixeBoxSpan iconfont icon-erweima"></span> <strong>{{time.name}}</strong>
						<div class="cartBox">
							<div class="bjfff"></div>
							<div class="QR_code">
								<p><img src="img/weixin.png" width="150px" height="150px" style=" margin-top:10px;"></p>
								<p>{{time.name}}扫一扫，关注我们</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</script>
	<script type="text/x-template" id="xiangqing">
		<div class="">
			<!-----商品详情部分------->
			<div class="shopdetails">
			<!-------放大镜-------->
			<div id="leftbox">
				<div id="showbox">
					<div id="zhezhao"></div>
					<div class="modeDiv"></div>
					<div class="imgshowDiv">
						<b>
							<img :src="imgsrc">
						</b>
						<span></span>
					</div>
					<p>
						<img :src="imgsrc">
					</p>
				</div>
				<!--展示图片盒子-->
				<div id="showsum">
					<p style="">
						<span v-for="(time,index) in xqData.srcArr" key="time.id" :style="'left:'+leftpx+'px;'" @click="setimgID(index)">
							<img :src="time.src" height="60">
						</span>
					<div></div>
				</div>
				<!--展示图片里边-->
				<p class="showpage">
					<a href="javascript:void(0);" id="showlast" @click="clickLeft(1)"> &lt; </a>
					<a href="javascript:void(0);" id="shownext" @click="clickLeft(-1)"> &gt; </a>
				</p>

			</div>
			<!----中间----->

			<div class="centerbox">
				<p class="imgname">{{xqData.name}}</p>
				<p class="Aprice">价格：<samp>￥{{xqData.price}}</samp></p>
				<p class="price">促销价：<samp>￥{{xqData.discount}}</samp></p>
				<p class="youhui">店铺优惠：<samp>购物满两件打八折</samp></p>
				<p class="kefu">客服：</p>
				<ul>
					<li class="kuanshi">款式：</li>
					<li v-for="o in 4" class="now shopimg">
						<a href="javascript:void(0);" title="熊猫套装"><img src="img/top/001.jpg" width="45"></a>
					</li>
				</ul>
				<div class="clear"></div>
				<p class="chima">尺码：</p>
				<p class="buy">
					<a href="javascript:void(0);" id="firstbuy">立即购买</a>
					<a href="javascript:void(0);">加入购物车</a>
				</p>
				<div class="clear"></div>
				<div class="fenx">
					<a href="javascript:void(0);"><img src="img/tell07.png"></a>
				</div>
				<p class="fuwu">服务承诺：</p>
				<p class="pay">支付方式：</p>
			</div>

			<!-----右边------->
			<div class="rightbox">
				<p class="name">——热卖商品</p>
				<img src="./reimai02.jpg" width="130" height="180">
				<p>￥58元</p>

				<img src="./reimai01.jpg" width="130" height="180">
				<p>￥58元</p>

				<img src="./reimai03.jpg" width="130" height="180">
				<p>￥58元</p>
			</div>

		</div>
		</div>
	</script>

	<body>
		<div id="myVue">
			<sh-top></sh-top>
			<sh-index v-if="flag == 'index'"></sh-index>
			<sh-liebiao v-if="flag == 'liebiao'"></sh-liebiao>
			<sh-xiangqing v-if="flag == 'xiangqing'"></sh-xiangqing>
			<sh-bottom></sh-bottom>
		</div>
		<script src="js/vueModel.js"></script>
	</body>
</html>